import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible' // 引入适配方案
import { NavBar,Form,Field,Button,Tabbar,TabbarItem,Icon,Tab,Tabs,Cell,List,PullRefresh
,ActionSheet,Popup,Col,Row,Badge,Search,Divider,CellGroup,Tag,Image,Dialog,DatetimePicker } from 'vant' // 引入组件

// 注册组件
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Icon)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Cell)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(ActionSheet)
Vue.use(Popup)
Vue.use(Col)
Vue.use(Row)
Vue.use(Badge)
Vue.use(Search)
Vue.use(Divider)
Vue.use(CellGroup)
Vue.use(Tag)
Vue.use(Image)
Vue.use(Dialog)
Vue.use(DatetimePicker)

Vue.config.productionTip = false

// 封装中间件函数 
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      inserted (el) {
        // 指令所在van-search组件
        // 组件根标签是div,input在内部
        // 以上都是原生标签对象
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
           el.focus()
        } else {
          // el本身不是输入框,尝试往里获取
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          if(theInput) theInput.focus()
          if(theTextArea) theTextArea.focus()
        }
      },
      update (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
       } else {
         // el本身不是输入框,尝试往里获取
         const theInput = el.querySelector('input')
         const theTextArea = el.querySelector('textarea')
         if(theInput) theInput.focus()
         if(theTextArea) theTextArea.focus()
       }
      }
    })
  }
}
// 执行目标对象install方法并传入Vue对象
Vue.use(directiveObj)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
